<template>
  <!-- VIP管理 -->
  <div class="app-container">
    <div class="app-wrap">
      <search-table ref="table" :table-loading="listLoading" :table-data="vipDataList" @query="getVipList(true)" @reset="refresh">
        <template v-slot:row></template>
        <template v-slot:actions>
          <el-button type="primary" v-permission="'vipConfig.add'" size="mini" icon="el-icon-plus" 
          @click="(isShowDetails = true),(checkedItem = null)">新增</el-button>
          <el-button type="info" size="mini" icon="el-icon-refresh" @click="getVipList">刷新</el-button>
        </template>
        <template>
          <el-table-column align="center" type="index" width="50">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.isChecked" :label="true" @change="handleCurrentChange(scope.row)">{{ "" }}</el-radio>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="vip_level" label="VIP等级" width="100" />
          <el-table-column align="center" prop="vip_upgrade_water" label="升级所需下注" width="120"/>
          <el-table-column align="center" prop="vip_weekly_daygift" label="登录天数筹码奖励" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-for="(item,index) in scope.row.chip" :key="index">
                第{{ item.min }}—{{ item.max }}天,{{propLabel(item.type)}}:{{ item.num }};
              </span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="upgrade_lottery" label="升级奖励" width="200" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-for="(item,index) in scope.row.upgrade" :key="index">
                {{ item.label }}【<span class="colorRed">{{ item.num }}</span>】
              </span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="vip_weekly_imediategift" label="购买筹码获得奖励" width="180" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.vip_weekly_imediategift">{{ propLabel(scope.row.imediategift[0]) }}
                【<span class="colorRed">{{ $public.mathNumberDivideWan(scope.row.imediategift[1]) }}</span>】</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="waterproof_ratio" label="返水比例" width="120">
            <template slot-scope="scope">
              {{ scope.row.waterproof_ratio/100 }}%
            </template>
          </el-table-column>
          <el-table-column align="center" prop="vip_weekly_time" label="礼包购买次数" width="120"/>
          <el-table-column align="center" prop="vip_weekly_commodity" label="礼包商品" width="150">
            <template slot-scope="scope">
              <span v-if="scope.row.vip_weekly_commodity">【{{ scope.row.vip_weekly_commodity }}】{{ goodsLabel(scope.row.vip_weekly_commodity) }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="vip_weekly_chippic" label="礼包背景图片" width="130">
            <template slot-scope="scope">
              <img class="iconImg" v-show="scope.row.vip_weekly_chippic && scope.row.vip_weekly_chippic!='0'" :src="scope.row.vip_weekly_chippic" alt="VIP等级Icon">
            </template>
          </el-table-column>
          <el-table-column align="left" prop="operation" label="操作" width="180">
            <template slot-scope="scope">
              <el-tooltip effect="dark" v-permission="'vipConfig.edit'" content="修改" placement="top-start">
                <el-button size="mini" type="warning" @click="editItem(scope.row)" icon="el-icon-edit-outline"/>
              </el-tooltip>
              <el-tooltip effect="dark" v-permission="'vipConfig.delete'" content="删除" placement="top-start">
                <el-button size="mini" type="danger" @click="deleteItem(scope.row)" icon="el-icon-delete"/>
              </el-tooltip>
            </template>
          </el-table-column>
        </template>
        <template v-slot:footer>
          <pagination  :total="currentTotal" :page.sync="listQuery.page" :limit.sync="listQuery.size" @pagination="getVipList" />
        </template>
      </search-table>
      <page-details :show="isShowDetails" @onHideDetails="onHideDetails" :data="checkedItem" :goodsData="goodsAllData" :propDataArray="propDataArray"/>
    </div>
  </div>
</template>

<script>
import { throttle } from "@/utils/index";
import { 
  getVip,
  delVip
 } from "@/api/game";
import {
  GOODS_TYPE
} from "@/utils/enum";
import PageDetails from "./page-details.vue";
import SearchTable from "@/components/SearchTable";
export default {
  name: "vipConfig",
  components: {
    PageDetails,
    SearchTable,
  },
  data () {
    return {
      GOODS_TYPE,
      vipDataList: [],
      checkedItem: null,
      listLoading: false,
      isShowDetails: false,
      currentTotal: 0,
      listQuery: {
        page: 1,
        size: 50,
      },
      goodsAllData:this.$store.state.commonState.goodDataArray,
      propDataArray:this.$store.state.commonState.propDataArray,
    };
  },
  created () {
    // this.getVipList();
  },
  activated () {
    this.goodsAllData=this.$store.state.commonState.goodDataArray
    this.propDataArray=this.$store.state.commonState.propDataArray
    this.getVipList();
  },
  methods: {
    // 获取快捷聊天表
    async getVipList (query) {
      let that = this,params=that.listQuery;
      if(query && !query.page){
        params.page=1
        params.size=50
      }
      that.vipDataList = [];
      that.checkedItem = null;
      that.listLoading = true;
      const response = await getVip(params)
      if (response.code==1) {
        if (response.data.list) {
          response.data.list.forEach(item => {
            item.isChecked = false;
            item.vip_upgrade_water=that.$public.mathNumberDivideWan(item.vip_upgrade_water)
            if(item.vip_weekly_imediategift){
              item.imediategift=item.vip_weekly_imediategift.split(',')
            }
            if(item.upgrade_lottery){
              item.upgrade=that.propBack(item.upgrade_lottery)
            }
            if(item.vip_weekly_daygift){
              item.chip=that.chipBack(item.vip_weekly_daygift)
            }
          });
          that.currentTotal = response.data.total;
          that.vipDataList = response.data.list;
        }
      }else{
        that.$message.error(response.msg)
      }
      that.listLoading = false;
    },
    // 编辑
    editItem (row) {
      let that = this;
      that.isShowDetails = true;
      that.checkedItem = row;
      that.handleCurrentChange(row);
    },
    // 删除
    deleteItem (row) {
      let that = this;
      that.handleCurrentChange(row);
      that.$confirm(`是否删除等级【${row.vip_level}】VIP配置`, "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        delVip({
          id: row.id,
        }).then(function (res) {
          that.getVipList();
          that.$message({
            type: "success",
            message: "删除成功!",
          });
        });
      })
      .catch(() => { });
    },
    // 道具的值
    propLabel(cellValue){
      return (this.propDataArray.find((item) => item.value == cellValue)?.label || "-");
    },
    // 商品的值
    goodsLabel(cellValue){
      return (this.goodsAllData.find((item) => item.value == cellValue)?.label || "-");
    },
    // 选择表格数据
    handleCurrentChange (val) {
      this.checkedItem = val;
      this.vipDataList.map((item) => {
        if (item.id === val.id) {
          item.isChecked = true;
        } else {
          item.isChecked = false;
        }
      });
    },
    // 道具设置
    propBack(str) {
      let arr = this.$public.srtToArr(str), arrData = [];
      if (arr[0] && typeof (arr[0]) == 'string') {
        this.propDataArray.map(item=>{
          if(item.value==arr[0]){
            arrData.push({ label: item.label, num: this.$public.mathNumberDivideWan(Number(arr[1])),type:item.value})
          }
        })
      } else {
        arr.map(item => {
          this.propDataArray.map(second=>{
            if(second.value==item[0]){
              arrData.push({ label: second.label, num: this.$public.mathNumberDivideWan(Number(item[1])) ,type:item.value})
            }
          })
        })
      }
      return arrData
    },
    // 筹码奖励回显
    chipBack(str) {
      let arr=this.$public.srtToArr(str),arrData=[],dayType=[];
      if(arr[0] && typeof(arr[0])=='string'){
        dayType=arr[1].split('|')
        arrData.push({min:Number(arr[0]),max:Number(dayType[0]),type:Number(dayType[1]),num:this.$public.mathNumberDivideWan(Number(arr[2]))})
      }else{
        arr.map(item=>{
          dayType=item[1].split('|')
          arrData.push({min:Number(item[0]),max:Number(dayType[0]),type:Number(dayType[1]),num:this.$public.mathNumberDivideWan(Number(item[2]))})
        })
      }
      return arrData
    },
    // 隐藏详情
    onHideDetails (show) {
      this.isShowDetails = false;
      if (show) {
        this.getVipList();
      }
    },
    // 刷新
    refresh: throttle(function () {
      this.listQuery = {
        page: 1,
        size: 50,
      };
      this.getVipList();
    }, 2000),
  },
};
</script>

<style lang="scss" scoped>
.iconImg{
  width: 30px;
  height: 30px;
}
</style>
